<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="btn1">全选</button>
		<button id="btn2">不选</button>
		<button id="btn3">反选</button>
		<div>
			<input type="checkbox">
			<input type="checkbox">
			<input type="checkbox">
			<input type="checkbox">
			<input type="checkbox">
			<input type="checkbox">
			<input type="checkbox">
			<input type="checkbox">
			<input type="checkbox">
			<input type="checkbox">
			<script type="text/javascript">
				/* 【1】点击全选按钮 把所有的复选框选上
				   【2】点击不选按钮 把所有选上的取消
				   【3】点击反选按钮 把所有线上的取消 没有选的选上
				 */
				var btn = document.getElementsByTagName('button')
				//需改变复选框的状态 所以需要获取复选框的状态
				var inputs = document.getElementsByTagName('input')

				//循环给每一个按钮绑定事件
				for (var i = 0; i < btn.length; i++) {

					btn[i].onclick = function() {

						//通过this 拿到点击的这个元素进行内容的判断
						if (this.innerHTML === '全选') {

							//循环给每一个input 添加 checked = true
							for (var j = 0; j < inputs.length; j++) {

								inputs[j].checked = true;

							} 
							}else if (this.innerHTML === '反选') {
								//循环把所有input原来的状态改为与之相反的状态
								//将true 状态改为 false{}
								for (var j = 0; j < inputs.length; j++) {
									inputs[j].checked = !inputs[j].checked;
								}

							} else if (this.innerHTML === '不选') {
								//把每一个状态改成checked='false'
								for (var j = 0; j < inputs.length; j++){
									inputs[j].checked=false;
									
									}
							}
						}


					}

				
			</script>
	</body>
</html>
